<template>
    <el-form-item label="服务名称:" prop="name">
        <el-input class="w-56 ls-input" maxlength="64" show-word-limit v-model.trim="modelValue.name"
            placeholder="请输入服务名称" />
    </el-form-item>
    <el-form-item label="服务简介:" prop="remarks">
        <el-input class="w-56 ls-input" v-model="modelValue.remarks" placeholder="请输入服务简介" />
    </el-form-item>
    <el-form-item label="服务分类:" prop="categoryId">
        <!-- 选择分类 -->
        <el-cascader class="w-56 mr-2 ls-input" v-model="modelValue.categoryId" :options="categoryData" :props="props"
            clearable />

        <!-- 新增分类 -->
        <el-button type="text" @click="toAddCategory">新增分类</el-button>
        <el-button type="text">|</el-button>
        <el-button type="text" @click="getCategoryLists">刷新</el-button>
    </el-form-item>
    <el-form-item label="轮播图:" prop="image">
        <div>
            <material-picker v-model="modelValue.image" :limit="10"></material-picker>
            <div class="form-tips">
                建议尺寸：800*800，可拖拽改变图片顺序，默认首张图为主图，最多上传10张
            </div>
        </div>
    </el-form-item>
    <el-form-item label="价格:" prop="price">
        <el-input class="w-56 ls-input" v-model="modelValue.price" placeholder="请输入价格" />
    </el-form-item>
    <el-form-item label="划线价:" prop="scribingPrice">
        <el-input class="w-56 ls-input" v-model="modelValue.scribingPrice" placeholder="请输入划线价" />
    </el-form-item>
    <el-form-item label="超出数量:" prop="outNumber">
        <el-input class="w-56 ls-input" v-model="modelValue.outNumber" placeholder="请输入超出数量" />
    </el-form-item>
    <el-form-item label="单位:" prop="unitId">
        <!-- 选择单位 -->
        <el-select v-model="modelValue.unitId" class="w-56 select" placeholder="请选择">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in unitData" :key="index" />
        </el-select>
        <!-- 新增单位 -->
        <unit-form @refresh="getUnitCommonLists" type="text" btnText="新增单位" class="mr-3" />
        <el-button type="text">|</el-button>
        <el-button type="text" @click="getUnitCommonLists">刷新</el-button>
    </el-form-item>
    <el-form-item label="服务积分:" prop="integral">
        <el-input class="w-56 ls-input" v-model="modelValue.integral" placeholder="请输入服务积分" />
    </el-form-item>

    <el-form-item label="排序:">
        <el-input class="w-56 ls-input" v-model="modelValue.sort" />
    </el-form-item>
    <el-form-item label="派单方式:" prop="isManualDispatch" :required="true">
        <el-radio v-model="modelValue.isManualDispatch" :label="1">手动派单</el-radio>
        <el-radio v-model="modelValue.isManualDispatch" :label="0">系统派单</el-radio>
    </el-form-item>
    <el-form-item label="商品状态:" prop="status">
        <el-radio v-model="modelValue.status" :label="1">立即上架</el-radio>
        <el-radio v-model="modelValue.status" :label="0">放入仓库</el-radio>
    </el-form-item>
    <el-form-item label="是否首页轮播:" prop="carousel" :required="true">
        <el-radio-group v-model="modelValue.carousel">
            <el-radio value="1" :label="1">开启轮播</el-radio>
            <el-radio value="0" :label="0">不开启轮播</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="是否开启团购:" prop="isBuy" :required="true">
        <el-radio-group v-model="modelValue.isBuy">
            <el-radio value="1" :label="1">开启团购</el-radio>
            <el-radio value="0" :label="0">不开启团购</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item v-if="modelValue.isBuy == 1" label="团购开启天数:" prop="buyStartTime" :required="true">
        <el-input-number v-model="modelValue.buyStartTime" :min="1" />
    </el-form-item>
    <el-form-item v-if="modelValue.isBuy == 1" label="团购价:" :required="true">
        <el-input-number class="w-56 ls-input" v-model="modelValue.buyNumber" placeholder="请输入团购价" />
    </el-form-item>

    <el-form-item v-if="modelValue.isBuy == 1" label="团购人数:" prop="buyPeopleNum" :required="true">
        <el-input-number v-model="modelValue.buyPeopleNum" :min="2" />
    </el-form-item>

</template>

<script lang="ts" setup>
import { apiCategoryLists } from "@/api/service/category";
import { apiUnitLists } from "@/api/service/unit";
import { reactive, ref } from "vue";
import MaterialPicker from "@/components/material/picker.vue";
import unitForm from "../../unit/components/unit-form.vue";

interface Lists {
    name: string;
    id: number | string;
}

withDefaults(
    defineProps<{
        modelValue?: any;
    }>(),
    {
        modelValue: {},
    }
);

const categoryData = ref<Array<Lists> | null>([]);
const unitData = ref<Array<Lists> | null>([]);
const props = reactive({
    multiple: false,
    checkStrictly: false,
    label: "name",
    value: "id",
    children: "sons",
    emitPath: false,
});

// 获取分类通用列表
const getCategoryLists = async (): Promise<void> => {
    categoryData.value = await apiCategoryLists({});
};

// 获取单位通用列表
const getUnitCommonLists = async (): Promise<void> => {
    const { lists } = await apiUnitLists("");
    unitData.value = lists;
};

// 去新建分类
const toAddCategory = () => {
    window.open(window.origin + "/service/category", "_blank");
};

getCategoryLists();
getUnitCommonLists();
</script>

<style lang="scss" scoped>
.ls-input {
    width: 460px;
}

.select {
    width: 340px;
    margin-right: 10px;
}
</style>
